<template>
  <div class="table_container">
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      :height='tableHeight'
      :row-height="40"
      use-virtual
      style="width: 100%;background-color: #03394a"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="checkHandle"
        type="selection"
        min-width="5%"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        align="center"
        :prop="item.prop"
        :label="item.text"
        :min-width="item.width"
        :formatter="ifuserType"
      ></el-table-column>
      <el-table-column
        v-if="updateHandle || deleteHandle || viewHandle"
        align="center"
        prop=""
        label="操作"
        min-width="5%"
      >
        <template slot-scope="scope">
          <el-button v-if="viewHandle" @click="handleView(scope.row)"  type="text"  size="small">查看</el-button>
          <el-button v-if="updateHandle" @click="handleClick(scope.row)" type="text" size="small" >编辑</el-button>
          <el-button  v-if="deleteHandle"  type="text"  size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "c-table",
  props: {
    //表头
    columns: {
      type: Array,
      default: [],
    },
    //表单数据
    tableData: {
      type: Array,
      default: [],
    },
    //编辑
    updateHandle: {
      type: [Boolean],
      default: true,
    },
    //删除
    deleteHandle: {
      type: [Boolean],
      default: true,
    },
    //多选
    checkHandle: {
      type: [Boolean],
      default: true,
    },
    //查看
    viewHandle: {
      type: [Boolean],
      default: false,
    },
    //高度
    tableHeight:{
      type:String,
      default:''
    },
    //类型
    type:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      multipleSelection: [],
    };
  },
  methods: {
    //多选
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick(row) {
      console.log(row);
    },
    handleView(row) {
      console.log(row, 123);
      this.$emit("paramsData", row.id);
    },
    //删除
    handleDelete(data) {
      this.$emit("delHandle", data);
    },
    //格式化数据
    ifuserType(row,column){
      if(column.property == 'STATUS'){
        return row.STATUS == '1' ?'未修好':'已修好'
      }else if(column.property.indexOf('EQUIP_INFO.') !== -1){
        var EQUIP_INFO=row.EQUIP_INFO
        var temp=column.property.slice(11)
        return EQUIP_INFO[temp]
      }else if(column.property == 'TYPE'){
        switch(row.TYPE){
          case 0:
              return "待入库"
              break;
          case 1:
              return "入库"
              break;
          case 2:
              return "待出库"
              break;
          case 3:
              return "出库"
              break;
          default:
              return ""
              break;
        }
      }else if(column.property=="ME_TYPE"){
          return row.ME_TYPE == '1' ?'浮选药剂':'煤泥水药剂'
      }else{
        return row[column.property]
      }
    }
  },
};
</script>
<style lang="scss">
.table_container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding-left: 0.15rem;
}

.el-table::before {
  background-color: transparent !important;
}
.el-table,.el-table tr,.el-table th {
  background-color: transparent !important;
  border: none !important;
  color: #fff;
  font-size: 0.18rem;
}
.el-table td {
  background-color: transparent;
  font-size: 0.16rem;
  border: none !important;
  color: #fff;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: #453945 !important;
}
.el-table .cell {
  line-height: normal;
}
.el-checkbox__inner {
  width: 0.15rem;
  height: 0.15rem;
}
.el-button--mini,.el-button--small {
  font-size: 0.15rem;
}
.el-table td{
  	// padding: 0;
    height: 50px;
}
</style>